<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style lang="">
         body{
            background-color: oldlace;
            width: 100%;
            height: 100%;           
            overflow: hidden;
        }
    </style>
</head>
<body>
    
</body>
<script>
   function xuehua(){
        // 获取屏幕的高度,宽度
       var h=document.documentElement.clientHeight;
       var w=document.documentElement.clientWidth;
       // 获取这个雪花距离屏幕上方,左边的距离
       var top=Math.random()*h
       var left=Math.random()*w
       var hua=document.createElement("img")
       hua.src="flake.png"
       hua.style.position = "absolute";
     //scale缩放  transform旋转
       hua.style.transform="scale("+Math.random()/3+")"
       document.body.appendChild(hua)
       function huadong(){
         top=top+Math.random()*20
         left=left+Math.random()*20
         hua.style.top=top+"px"
         hua.style.left=left+"px"
          if (top > h) {
                top = -100;
            }
            if (left > w) {
                left = -100;
            }
       }
    // 开启定时器，让雪花不停的运动
    setInterval(huadong,150)
   } 
   for(var i=0;i<200;i++){
     new xuehua();
    }

</script>
</html>